<template>
	<view class="home-container wrapper">
		
		<view class="earnings-wrapper">
			<view class="earnings">
				<view>
					<view class="earnings-title">可提现余额(元)</view>
					<view class="earnings-amount">￥{{ toFixedNum(num) }}</view>
					<template v-if="agentTankType == true">
						<view class="earnings-title margin-t8">真实可提现余额(元)</view>
						<view class="earnings-amount">￥{{ toFixedNum(realNum) }}</view>
					</template>
					<view class="" style="margin-left:15px;padding: 6px 12px;background: rgba(255,255,255,0.8);border-radius: 6px;margin-top: 12px;color: #7B4EFF;text-align: center;" @click.stop="earningsWithdrawalHandle" v-if="agentPermission.allowWithdraw==1">立即提现</view>
				</view>
			</view>
			<view class="earnings-detail" @click="withdrawalInfoHandel">提现记录</view>
		</view>
		
		<!-- <div class="top-header">
			<view class="top-title">
				<text class="title-name">钱包</text>
				<text class="withdrawal-info" @click="withdrawalInfoHandel">提现记录</text>
			</view>
			<div class="b-total flex-center">
				<view class="b-total-box flex-column">
					<text class="tip">可提现余额</text>
					<text class="num"> ￥{{ toFixedNum(num) }} </text>
					<div class="withdraw" @click.stop="earningsWithdrawalHandle" v-if="agentPermission.allowWithdraw==1">立即提现</div>
				</view>
			</div>
		</div> -->
		<view class="account">
			<view v-for="(item, index) in list" :key="index" @click="navTo(item)">
				<view class="item1">
					<view class="item flex-space-between" v-if="item.status == 1">
						<text class="tip">{{ item.walletName }}</text>
						<view class="num">
							<text>￥{{ toFixedNum(item.usableAmount) }}</text>
							<!-- <text class="capital-pool" @click.stop="handleCapital" v-if="item.walletType == 6 && info.agentLevel==1">转入</text> -->
						</view>
					</view>
					<view class="flex flex-end realNum" v-if="agentTankType == true">
						<text>真实金额 ￥{{ toFixedNum(item.realAmount) }}</text>
					</view>
				</view>
			</view>
			<!-- <view class="item flex-center flex-column" v-for="(item, index) in list" :key="index" @click="navTo(item)">
				<text class="num">{{ toFixedNum(item.usableAmount) }}</text>
				<text class="tip">{{ item.walletName }}</text>
			</view> -->
		</view>

		<m-footer :tabIdx="2"></m-footer>
	</view>
</template>

<script>
	import {
		income
	} from "_a/earnings/index";
	export default {
		data() {
			return {
				num: 0,
				realNum: 0,
				agentTankType: false,
				list: [],
				month: "2022-09",
				info:{},
				agentPermission:{
					allowWithdraw:1
				},
			};
		},
		computed: {
			account() {},
		},
		// 下拉刷新
		async onPullDownRefresh() {
			this.$store.dispatch("getUserDetail").then((res) => {
				uni.stopPullDownRefresh();
				this.getData();
				this.$tip.toast("刷新成功!", "success", 500);
			});
		},
		onShow() {
			this.getData();
		},
		methods: {
			// async initData() {
			// 	await this.getData();
			// },
			getData() {
				this.$store.dispatch("getUserDetail").then((res) => {
					this.list = res.wallet;
					// this.list = this.$store.getters.userInfo.wallet;
					this.num = this.list.reduce((total, item) => {
						return (total +=
							item.usableAmount - item.transitAmount - item.freezeAmount);
					}, 0);
					this.realNum = this.list.reduce((total, item) => {
						return (total +=
							item.realAmount);
					}, 0);
					this.info = res.info;
					this.agentPermission.allowWithdraw = res?.agentPermission?.allowWithdraw;
					this.agentTankType = res.agentTankType
					this.$forceUpdate()
				});
			},
			navTo(item) {
				this.$nav.push({
					path: "/pages/earnings/earningsDetails",
					query: {
						type: item.walletType
					},
				});
			},
			earningsWithdrawalHandle(item) {
				const routeName = `/pages/earnings/earningsWithdrawal?type=${item.walletType}`;
				this.$nav.push({
					path: routeName,
				});
			},
			// 提现记录
			withdrawalInfoHandel() {
				this.$nav.push({
					path: "/pages/earnings/withdrawalList",
				});
			},
			handleCapital(item) {
				this.$nav.push({
					path: "/pages/earnings/capitalPool",
				});
			}

		},
	};
</script>

<style lang="scss" scoped>
	
	.wrapper{
		padding: 0px $uni-spacing-row-lg;
		padding-bottom: R(100px);
		.earnings-wrapper{
			margin-top: $uni-spacing-col-lg;
			border-radius: $uni-border-radius-xl;
			padding: $uni-spacing-row-lg 0;
			overflow: hidden;
			background:url('../../common/images/earnings/earnings-bg.png') no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			view{
				color: #fff;	
			}
			.earnings-title{
				padding-left: $uni-spacing-row-lg;
			}
			.earnings-amount{
				font-size: $uni-font-size-xl;
				font-weight: bold;
				margin-top: $uni-spacing-col-lg;
				padding-left: $uni-spacing-row-lg;
			}
			.earnings-detail{
				background: rgba(255, 255, 255, 0.4);
				border-bottom-left-radius:15px;
				border-top-left-radius:15px;
				padding: $uni-spacing-col-sm $uni-spacing-row-base;
				font-size: $uni-font-size-sm;
			}
		}
		
	}
	.top-header {
		background: url(../../common/images/home-new/bg-up.png) no-repeat;
		background-size: 100% 100%;
		padding: R(20px) 0;
		// display: flex;
		align-items: center;
		position: relative;
		height: R(400px);
		color: #fff;
		margin-bottom: R(120px);

		.top-title {
			text-align: center;
			position: relative;
			height: R(100px);
			line-height: R(100px);

			.title-name {
				text-align: center;
				width: 100%;
				font-size: R(45px);
			}

			.withdrawal-info {
				position: absolute;
				right: R(40px);
				font-size: R(25px);
			}
		}

		.b-total {
			text-align: center;
			background: url(../../common/images/earnings/block-money-bg.png) no-repeat;
			width: 90%;
			height: R(436px);
			background-size: 100% 100%;
			align-items: center;
			display: flex;
			color: #344460;
			margin: 0 auto;

			&-box {
				text-align: center;
				width: 100%;
			}

			.num {
				font-size: R(60px);
				font-weight: 500;
				margin-bottom: R(10);
				margin: R(40px) 0;
				color: #344460;
			}

			.tip {
				font-size: R(30px);
				font-weight: 400;
				color: #8F9BB2;
			}
		}

		.withdraw {
			// position: absolute;
			// right: R(30);
			// top: R(80);
			background: url(../../common/images/earnings/btn-withdrawal.png) no-repeat;
			background-size: 100% 100%;
			width: R(397px);
			height: R(71px);
			line-height: R(68);
			text-align: center;
			// background-color: #53B3FC;
			border-radius: R(10);
			margin: 0 auto;
			color: #FFFFFF;
			font-size: R(30px);
		}
	}

	.account {
		margin-top: R(30);
		// flex-wrap: wrap;
		// padding: R(20px) R(40);
		// justify-content: space-between;

		.item {
			// background: url(../../common/images/newIcon/w-account-bg.png) no-repeat;
			// background-size: 100% 100%;
			// width: R(310);
			// height: R(210);
			margin-bottom: R(20);
			background-color: #FFFFFF;
			border-radius: R(10px);
			padding: R(20) R(30);


			.num {
				font-size: R(40);
				color: #8F9BB2;
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: R(70px);
			}

			.tip {
				font-size: R(28);
				color: #40506A;
			}

			.capital-pool {
				font-size: R(24px);
				margin-left: R(20px);
				background-color: #4888FB;
				padding: R(10px) R(20px);
				// border-radius: R(20px);
				color: #FFFFFF;
				// height: R(26px);
				text-align: center;
			}
		}
	}
	.realNum {
		color: #8F9BB2;
		padding: R(20) R(30);
	}
	
	.item1 {
		background-color: #FFFFFF;
		margin-bottom: R(20);
	}
</style>